<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<%	String command = request.getParameter("command");
	String idx = request.getParameter("idx");
	command += "_"+idx;
%>
<script type="text/javascript">
    function getXHR(){
        if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHTTP");
        }        
    }
    var xhr=null;
    function addComments(){
        //1. xhr객체 얻어오기
        xhr=getXHR();

        //2. 콜백메소드 설정하기
        xhr.onreadystatechange=add_callback;

        //3. open함수로 초기화설정(전송방식,서버주소,..)
        xhr.open("POST","./comm.jo?cmd=insert",true);

        //4. send함수로 서버에 요청
        //-*-  post방식으로 전송할때는 아래와같이 콘텐츠타입을 설정해야 함!*-*-/
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        
        //사용자가 입력한 아이디와 영화평 얻어오기
        var NICKNAME= document.getElementById("NICKNAME").value;
        var comments= document.getElementById("comments").value;
        var COMMAND = document.getElementById("COMMAND").value;
        var param="NICKNAME=" +NICKNAME +"&COMMAND=" +COMMAND +"&comments=" +comments;

        //send메소드를 호출하면서 파라미터 전송하기
        xhr.send(param);
        document.getElementById("comments").value = "";
    }
    function add_callback(){
        if(xhr.readyState==4 && xhr.status==200){
            var xml=xhr.responseXML;
            var result=xml.getElementsByTagName("info")[0].firstChild.nodeValue;
            if(result=="success"){
                //alert('등록성공');
                getList(); //댓글목록얻어오기
            }else{
                //alert("등록실패");
            }
        }
    }
    
    function deletecomment(idx){
    	//1. xhr객체 얻어오기
        xhr=getXHR();

        //2. 콜백메소드 설정하기
        xhr.onreadystatechange=del_callback;

        //3. open함수로 초기화설정(전송방식,서버주소,..)
        xhr.open("POST","./comm.jo?cmd=delete",true);

        //4. send함수로 서버에 요청
        //-*-  post방식으로 전송할때는 아래와같이 콘텐츠타입을 설정해야 함!*-*-/
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        var NICKNAME= document.getElementById("NICKNAME").value;
        //사용자가 입력한 아이디와 영화평 얻어오기
        var param="idx="+idx +"&NICKNAME="+NICKNAME;
        //send메소드를 호출하면서 파라미터 전송하기
        xhr.send(param);
    }
    
    function del_callback(){
        if(xhr.readyState==4 && xhr.status==200){
            var xml=xhr.responseXML;
            var result=xml.getElementsByTagName("info")[0].firstChild.nodeValue;
            if(result=="success"){
                //alert('등록성공');
                getList();	
            }else{
                alert("삭제 권한이 없습니다");
            }
        }
    }

    function getList(){
        xhr=getXHR();
        xhr.onreadystatechange=showList;
        xhr.open("POST","./comm.jo?cmd=list",true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        var COMMAND = document.getElementById("COMMAND").value;
        var param="COMMAND=" +COMMAND;
        xhr.send(param);
    }

    //댓글 div안의 내용들 모두 제거하기.
    function listRemove(){
        //commList의 자식div의 갯수 얻어오기.(컬렉션타입으로 얻어옴)
        var childs=document.getElementById("commList").childNodes;

        //commList의 자식div들 제거하기.
        for(var i=childs.length - 1;i>=0;i--){
            //childs배열의 i번째 요소 참조값 얻어오기.
            var child=childs.item(i);

            //commList에서 child제거하기
            document.getElementById("commList").removeChild(child);
        }
    }

    // textarea에서 개행은 \n으로 db에 저장된다.
    // 가져온 데이터를 개행하기 위해서는 
    // \n을 <br/>로 바꿔줘야 한다.
    //str1문자열에서 str2를 str3문자열로 바꾸기
    //예: replace("hello \n test","\n","<br/>");
    function replace(str1, str2, str3){
        var ch="";
        var chstr="";
        for(var i=0;i<str1.length;i++){
            ch=str1.charAt(i);
            if(ch==str2){// str2 : '\n'
                chstr=chstr+str3;
            }else{
                chstr=chstr + ch;
            }
        }
        return chstr;
    }

    // 정상적이면(xhr.readyState==4 && xhr.status==200)
    // 기존 화면의 <div>삭제하고 불러와 
    // 표시한다.
    function showList(){
        if(xhr.readyState==4 && xhr.status==200){
            //commList의 자식div모두 제거하기
            listRemove();
            
            var xml=xhr.responseXML;
            var len=xml.getElementsByTagName("nickname").length;
            if(len>0){
                for(var i=0;i<len;i++){
                    var NICKNAME=xml.getElementsByTagName("nickname")[i].firstChild.nodeValue;
                    var COM_DTM=xml.getElementsByTagName("date")[i].firstChild.nodeValue;
                    var CONTENT=xml.getElementsByTagName("content")[i].firstChild.nodeValue;
                    var COM_SEQ=xml.getElementsByTagName("com_seq")[i].firstChild.nodeValue;
                    comments = replace(comments,'\n','<br/>');
                    var txt=  "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size=\"2\">"+
                    			"[&nbsp;"+NICKNAME + "&nbsp;]&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;" +
                    		  CONTENT  + "</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=\"button\" value=\"삭제\" onclick=\"deletecomment("+COM_SEQ+")\"><div align=\"right\"><font size=\"1\">(" +
                   			  COM_DTM  + ")</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>";

                    //내용을 담을 div 생성하기
                    var div=document.createElement("div");

                    //생성된 div에 내용담기
                    div.innerHTML=txt;	                
                    div.style.width="998px";
                    div.style.height="35px";
                    div.style.marginTop = "2px";
                    var commList=document.getElementById("commList");
                    //댓글 div에 생성된 div추가하기.
                    commList.appendChild(div);
                }
            }
        }
    }
</script>
<body onload="getList()">
<br><br>
<div align="center" style="text-align: left; border-radius:10px; padding-top: 10px; background-color:#EFEFEF;" >
<br><br>  
<div>
    <!-- 댓글이 추가될 div -->
    <div id="commList">
    </div><br><br>
    <div id="commReg" style="margin-left:20px; width:950px; "><br>
       <P>&nbsp;&nbsp;&nbsp;&nbsp;댓&nbsp;&nbsp;글 <br><br></P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <textarea rows="3" cols="30" id="comments" style="width: 900px;"></textarea><br>
        <input type="hidden" id="NICKNAME" name="NICKNAME" value="<%=session.getAttribute("login")%>">
        <input type="hidden" id="COMMAND" name="COMMAND" value="<%=command%>">
        <p align="right"><input type="button" value="등록" onclick="addComments()"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br></p>
    </div>
</div>
<br><br>
</div>
</body>
</html>